import React, { Component } from 'react'
import './index.css';
import Header from '../Header';
import Main from '../Main';
import Footer from '../Footer';
import { nanoid } from 'nanoid'
export default class App extends Component {
    state = {
        left: 0
    }
    componentDidMount () {
        let step = 1;
        this.timer = setInterval(() => {
            //判断边界
            let maxLeft = this.bigbox.offsetWidth - this.inner.offsetWidth;
            if (this.state.left >= maxLeft || this.state.left < 0) {
                //逆向
                step *= -1;
            }
            // 修改 left 的值
            this.setState({
                left: this.state.left + step
            })
        }, 20);
    }
    componentWillUnmount () {
        //清除定时器
        clearInterval(this.timer);
    }
    render () {
        return (
            <div ref={el => this.bigbox = el} className="bigbox">
                <div ref={el => this.smallbox = el} className="smallbox" style={{ left: this.states.left + 'px' }}>

                </div>
            </div>
        )
    }



}
